<template>
    <div>
        <!--<canvas id="canvas" width="200" height="200" ref="myCanvas">
            您的浏览器不支持 canvas
        </canvas>-->

        <canvas id="canvas2" width="1000" height="1000" style="background:#000" ref="myCanvas2">
            您的浏览器不支持canvas标签
        </canvas>
    </div>
</template>

<script>
    let canvas;
    let ctx;

    let canvas2;
    let ctx2;
    let time=0;
    export default {
        name: "index",
        mounted() {
            setInterval(this.draw,10);
            // 当调整窗口大小时重绘canvas
            window.onresize = () => {
                // this.initCanvas()
                setInterval(this.draw,10);
                // this.draw()
            }
            //使地球动起来

        },
        methods: {
            initCanvas() {
                console.log("初始化canvas")
                canvas = this.$refs.myCanvas;
                ctx = canvas.getContext('2d');
                canvas.width = window.innerWidth
                canvas.height = window.innerHeight
                this.drawSmile()
            },
            drawSmile() {
                ctx.beginPath();
                ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
                ctx.moveTo(110, 75);
                ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
                ctx.moveTo(65, 65);
                ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
                ctx.moveTo(95, 65);
                ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
                ctx.stroke();
            },
            draw() {

                canvas2 = this.$refs.myCanvas2;
                ctx2 = canvas2.getContext('2d');
                ctx2.clearRect(0, 0, 1000, 1000); //清除画布(清除之前的内容 重新画)
                //画轨道,设置笔触颜色
                ctx2.strokeStyle = "#8D1C21";
                ctx2.beginPath();
                ctx2.arc(500, 500, 100, 0, Math.PI * 360, false);
                ctx2.closePath();
                ctx2.stroke();

                //画太阳
                ctx2.beginPath();
                ctx2.arc(500, 500, 20, 0, 360, false);
                ctx2.closePath();
                let sunColor = ctx2.createRadialGradient(500, 500, 0, 500, 500, 20);//(内圆心x,内圆形y,内半径,外圆心x,外圆心y,外半径);
                sunColor.addColorStop(0, "#f00");
                sunColor.addColorStop(1, "#f90");
                ctx2.fillStyle = sunColor;		//设置填充颜色(渐变色)
                ctx2.fill();

                //画地球
                ctx2.save();
                ctx2.translate(500, 500);		//设置一下异次元空间的0，0点
                //ctx2.rotate(90*Math.PI/190);
                ctx2.rotate(time * 360 / 365 * Math.PI / 190);

                ctx2.beginPath();
                ctx2.arc(0,-100,10,0,360,false);
                ctx2.closePath();
                var earthColor=ctx2.createRadialGradient(0,-100,0,0,-100,10);
                earthColor.addColorStop(0,'#78B1E8');
                earthColor.addColorStop(1,'#050C12');
                ctx2.fillStyle=earthColor;
                ctx2.fill();
                ctx2.restore();

                time+=1; //每画一次图像，时间参数加1

            }
        }
    }
</script>

<style scoped>

</style>
